<template>
  <div class="table-data">
    <div class="search-box">
      <el-input size="small" v-model="searchMap.keyword" placeholder="商品名称"></el-input>
       <el-date-picker
        v-model="dateTime"
        type="datetimerange"
        value-format="yyyy-MM-dd hh:mm:ss"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
    
      <el-select v-model="searchMap.status" clearable placeholder="状态">
        <el-option label="可结算" value="able"></el-option>
        <el-option label="审核中" value="freeze"></el-option>
        <el-option label="已结算" value="complete"></el-option>
      </el-select>
      <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
    </div>
    <el-table :data="tableData" ref="multipleTable"  style="width:100%" :height="tHeight" class="table-box">
      <el-table-column label="id" prop="id"></el-table-column>
      <!-- <el-table-column label="商家id" prop="shop_id"></el-table-column>
      <el-table-column label="可提现id标志" prop="shop_settle_id"></el-table-column> -->
      <el-table-column label="商品名称" prop="goods.title"></el-table-column>
      <el-table-column label="结算价" prop="price"></el-table-column>
      <el-table-column label="核销码" prop="code"></el-table-column>
      <el-table-column label="规格" >
          <template slot-scope="scope">
            <span v-if="scope.row.ticket.spec_item">{{scope.row.ticket.spec_item.key_name}}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="create_time"></el-table-column>
      <el-table-column label="核销数量" prop="num"></el-table-column>
      <el-table-column label="状态" prop="settle_staus_txt"></el-table-column>
      <el-table-column label="退款标识">
        <template slot-scope="scope">
          <p v-if="scope.row.refund==1">退款</p>
          <p v-else>正常</p>
        </template>
      </el-table-column>
      <el-table-column label="核销人" prop="verify_type">
        <template slot-scope="scope">
          <span v-if="scope.row.verify_type == 1">商家端-</span>
          <span v-else >总平台-</span>
          {{scope.row.admin ? (scope.row.admin.real_name ? scope.row.admin.real_name : scope.row.admin.username):''}}
        </template>
      </el-table-column>
    </el-table>
    <div class="pages" ref="page-box">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10,30,50]"
        :page-size="size"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
      ></el-pagination>
      </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
// import { State, Getter, Mutation, Action } from "vuex-class";
import settlementApi from "@/api/settlement"
import businessApi from "@/api/business";
@Component({ components: {} })
export default class businessDetail extends Vue {
  // @Getter("user") getUser: any;
  @Provide() dateTime: any = ["",""]; // 时间
  @Provide() tHeight: number = document.body.offsetHeight - 323;
  @Provide() tableData: any = []; // 表格数据
  @Provide() multipleTable: any = []; // 表格数据
  @Provide() page: number = 1; // 当前page
  @Provide() size: number = 10; // 请求数据的个数 默认5
  @Provide() total: number = 0; // 总数据条数
  @Provide() state: boolean = false; // 黑白名单状态
  @Provide() datas:any={}
  @Provide() searchMap:any={
    shop_id: "",
    keyword: "",
    start_time:"",
    end_time:"",
    status:""
  }
  @Provide() searchMapB:{
    keyword: string,
    cate_id: string,
    is_child: any,
  }={
    keyword: "",
    cate_id: "",
    is_child: 0
  }
  created() {
    this.loadData();
  }
  // 提交
  submitForm() {
   
  }
  handleSizeChange(val: number): void {
    this.size = val;
    this.page = 1;
    this.loadData();
  }

  handleCurrentChange(val: number): void {
    this.page = val;
    this.loadData();
  }
  
  loadData() {
    this.searchMap.shop_id=this.$route.query.id
    settlementApi.busSettDetail(this.page,this.size,this.searchMap)
      .then((res: any) => {
        this.tableData = res.data.data.list;
        this.total = res.data.data.total
    });
    
  }
  handleSearch(): void {
    // 点击搜索
    if(this.dateTime==null){
      this.dateTime=["",""]
    }
    this.searchMap.start_time=this.dateTime[0]
    this.searchMap.end_time=this.dateTime[1]
    this.loadData();
  }
  headClass() {
            return "text-align: center;background:#eef1f6;";
        }
}
</script>

<style lang="scss" scoped>
.table-data {
  .user-info-item {
    width: 100%;
    display: flex;
    padding: 10px 0;
    span {
      display: inline-block;
    }
    span:first-of-type {
      width: 150px;
      text-align: right;
    }
    span:last-of-type {
      padding-left: 15px;
    }
  }
}
.sub{
  text-align: center;
  margin: 50px 0;
}
</style>
